
.topbar-wrapper{
    position: static;
}



// 笔记容器
.note-wapper {
    display: flex;
    justify-content: space-around;
    padding-left: 10%;
    padding-right: 10%;

    .left {
        flex-grow: 7;


        .notes {
            width: 100%;
            overflow: hidden;

            li {
                margin: 0 auto;
                margin-bottom: 2%;
                width: 80%;
                margin-top: 2%;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
                padding-left: 2%;
                padding-right: 2%;
                padding-top: 3%;
                padding-bottom: 2%;
                transition: 0.3s;

                h3 {
                    font-size: 36px;
                    font-weight: bold;
                }

                h4 {
                    font-size: 24px;
                }

                p {
                    margin: 1% auto;
                }

            }

            li:hover {
                transform: scale(1.05);
            }

        }
    }

    .right {
        padding-top: 1%;
        min-width: 30%;
        height: 600px;
        flex-grow: 3;

        h3 {
            font-size: 36px;
            font-weight: bold;
        }

        input {
            padding-left: 5%;
            background-color: rgb(221,221,221);
            margin: 20px auto;
            width: 80%;
            height: 50px;
            border-radius: 10px;
            border: none;
        }

        ul{
            li{

                float: left;
                margin: 2%;
                padding: 3%;
                margin-left: 0;
                background-color: rgb(107,45,191);
                border-radius: 10px;

                a{
                    color: #FFF;
                    font-weight: bold;
                }
            }
        }

    }
}


// 分页按钮
.pagePoint {
    text-align: center;
    margin-bottom: 50px;



    button {
        cursor: pointer;

        margin-left: 10px;

        background-color: #eee;
        border: none;
        width: 50px;
        height: 50px;
        font-size: 20px;
        font-weight: bold;


    }

    .active {
        color: #eee;
        background-color: #333;
    }



}